<template>
  <el-container>
    <el-header class="header">
      <headerSearch ref="search" @searchFn="getGoodsList(1)"></headerSearch>
    </el-header>
    <el-main>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="2" class="btncol">
              <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                class="btn"
                @click="openDialog"
                >新建</el-button
              >
            </el-col>
            <el-col :span="2">
              <el-button type="primary" class="btn2" @click="insertFn"
                >导入数据</el-button
              >
            </el-col>
          </el-row>
        </el-header>
        <el-main class="bmain">
          <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="skuName" label="商品名称" width="200">
            </el-table-column>
            <el-table-column prop="skuImage" label="商品图片" width="200">
              <template #default="{ row }">
                <img class="goodsimg" :src="row.skuImage" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="brandName" label="品牌" width="200">
            </el-table-column>
            <el-table-column prop="unit" label="规格" width="200">
            </el-table-column>
            <el-table-column
              prop="price"
              label="商品价格"
              width="200"
              :formatter="priceFormatter"
            >
            </el-table-column>
            <el-table-column
              prop="skuClass.className"
              label="商品类型"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建日期"
              width="250"
              :formatter="timeFormatter"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <span class="edit" @click="openDialog(row)">修改</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="page" type="flex">
            <el-col :span="2">共{{ totalCount }}条记录</el-col>
            <el-col :span="2"
              >第 {{ params.pageIndex + '/' + totalPage }} 页</el-col
            >
            <el-col :span="16"></el-col>
            <el-col :span="2"
              ><button :disabled="params.pageIndex === 1" @click="change(-1)">
                上一页
              </button></el-col
            >
            <el-col :span="2"
              ><button @click="change(1)">下一页</button></el-col
            >
          </el-row>
        </el-main>
        <skuDialog ref="skuDialog" @flash="getGoodsList"></skuDialog>
        <insertDataDialog ref="insertData"></insertDataDialog>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import { getGoodsList } from '@/api/gdInfo'
import headerSearch from './components/headerSearch.vue'
import skuDialog from './components/skuDialog.vue'
import insertDataDialog from './components/insertDataDialog.vue'
export default {
  name: 'Dkd3SkuClass',
  components: {
    headerSearch,
    skuDialog,
    insertDataDialog
  },
  data () {
    return {
      loading: false,
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      totalPage: 0
    }
  },

  mounted () {
    this.getGoodsList()
  },

  methods: {
    change (val) {
      console.log(this.loading)
      this.params.pageIndex += val
      this.getGoodsList()
    },
    async getGoodsList (val) {
      try {
        const content = this.$refs.search.formInline.type
        if (val) {
          this.params.skuName = content
          this.params.pageIndex = 1
        }
        this.loading = true
        const res = await getGoodsList(this.params)
        // console.log(res)
        this.totalCount = res.totalCount
        this.totalPage = res.totalPage
        this.tableData = res.currentPageRecords
      } finally {
        this.loading = false
      }
    },
    priceFormatter (row, column, cellValue, index) {
      return cellValue / 100
    },
    timeFormatter (row, column, cellValue, index) {
      return this.formatDate(cellValue)
    },
    formatDate (dateTimeStr) {
      const dateTime = new Date(dateTimeStr)
      const year = dateTime.getFullYear()
      const month = (dateTime.getMonth() + 1).toString().padStart(2, '0')
      const date = dateTime.getDate().toString().padStart(2, '0')
      const hours = dateTime.getHours().toString().padStart(2, '0')
      const minutes = dateTime.getMinutes().toString().padStart(2, '0')
      const seconds = dateTime.getSeconds().toString().padStart(2, '0')

      return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
    },
    async openDialog (row) {
      // console.log(typeof row.id)
      // console.log(row)
      await this.$refs.skuDialog.getPullList()
      if (row.classId) {
        this.$refs.skuDialog.form = { ...row }
        this.$refs.skuDialog.form.price = row.price / 100
        this.$refs.skuDialog.flag = 1
      }
      this.$refs.skuDialog.visible = true
    },
    insertFn () {
      this.$refs.insertData.visible = true
    }
  }
}
</script>

<style lang="less" scoped>
.el-col {
  text-align: left;
}
.el-main {
  background-color: #fff;
  .edit {
    cursor: pointer;
    margin-right: 10px;
    color: #a2ceff;
  }
  .del {
    color: #ff5a5a;
  }
}
.el-header {
  padding: 0;
}
.header {
  margin-bottom: 10px;
}
.page {
  button {
    cursor: pointer;
    width: 70px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background-color: #d5ddf8;
    border: none;
  }
}
.el-table {
  margin-bottom: 10px;
}
.bmain {
  padding-bottom: 0;
}
.btn {
  border: none;
  background: linear-gradient(135deg, #ff8538, #ff712b) !important;
  &:hover {
    background: linear-gradient(135deg, #ff7d43, #db3602) !important;
  }
}
.btn2 {
  height: 38px;
  border: none;
  background: linear-gradient(135deg, #fbf4f0, #fbf4f0) !important;
  color: #333;
  &:hover {
    background: linear-gradient(135deg, #f3e7e1, #f3e7e1) !important;
  }
}
.goodsimg {
  width: 20px;
  height: 20px;
}
.btncol {
  width: 95px;
}
</style>
